<!DOCTYPE html>
<html lang="zh-cn" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.thymeleaf.org" layout:decorator="admin/fragments/layout">
<head>
    <title>资源授权-角色权限映射管理</title>
    <meta name="active" content="tenant-manage"/>
    <link rel="stylesheet" type="text/css"
          th:href="@{/resources/vendor/plugins/datatables/media/css/dataTables.bootstrap.css}"/>

    <!-- 弹出框 CSS -->
    <link rel="stylesheet" type="text/css" th:href="@{/resources/vendor/plugins/magnific/magnific-popup.css}"/>

    <!-- 弹出框 -->
    <script th:src="@{/resources/vendor/plugins/magnific/jquery.magnific-popup.js}"></script>

    <!-- 提示 PNotify -->
    <script th:src="@{/resources/vendor/plugins/pnotify/pnotify.js}"></script>

    <!--jquery 确认框-->
    <script th:src="@{/resources/jquery-confirm-master/js/jquery-confirm.js}"></script>
    <link rel="stylesheet" type="text/css" th:href="@{/resources/jquery-confirm-master/css/jquery-confirm.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/resources/jquery-confirm-master/css/jquery-confirm.less}"/>

</head>
<body>

<header id="topbar" class="ph10" layout:fragment="topbar">
    <div class="topbar-left">
        <ol class="breadcrumb">
            <li class="crumb-icon crumb-active">
                <a th:href="@{/admin/dashboard}"> <span class="glyphicon glyphicon-home"></span> </a>
            </li>
            <li class="crumb-trail">资源授权</li>
            <li class="crumb-trail">角色权限映射管理</li>

        </ol>
    </div>
    <div class="topbar-right hidden-xs hidden-sm" id="toggle_sidemenu_r">
        <a href="#" class="btn btn-default btn-sm fw400 mr10">
            <span class="fa fa-search"></span> 查询
        </a>
    </div>
    <div class="topbar-right hidden-xs hidden-sm pr10">
        <a th:href="@{/rolePerm/toAdd(pclass=p_6,currentClass=c_11)}"
           class="btn btn-default btn-sm fw400 ml10">
            <span class="fa fa-plus pr5"></span> 新增
        </a>
        <a th:onclick="'javascript:del();'"
           class="btn btn-default btn-sm fw400 ml10">
            <span class="fa fa-minus pr5"></span> 删除
        </a>
    </div>
</header>

<div layout:fragment="content">
    <div class="panel panel-visible" id="spy1">
        <div class="panel-heading">
            <div class="panel-title hidden-xs">
                <span class="glyphicon glyphicon-tasks"></span>角色权限映射列表
            </div>
        </div>
        <div class="panel-body pn">
            <table class="table table-striped table-hover" id="datatable" cellspacing="0" width="100%">
                <thead>
                <tr>
                    <th style="width: 50px;"><input type="checkbox" onclick="allCheck()" id="allRolePermissionBox" style="margin-left: 5px;" /></th>
                    <th style="width: 50px;">序号</th>
                    <th style="width: 120px;">角色名称</th>
                    <th style="width: 120px;">权限名称</th>
                    <th style="width: 100px;">创建人</th>
                    <th style="width: 120px;">创建时间</th>
                    <th style="width: 120px;">备注</th>
                    <th style="width: 50px;">操作</th>
                </tr>
                </thead>
                <tbody>
                <tr onclick="onSuccess(this)" th:each="rolePermission : ${rolePermissionPage.list}" th:object="${rolePermission}" th:attr="id=|tb_*{rolePermissionId}|">
                    <td th:width="50px"><input type="checkbox" onclick="check(this)" name="rolePermissionBox" style="margin-left: 5px;" th:attr="id=|box_*{rolePermissionId}|" th:value="*{rolePermissionId}" /></td>
                    <td th:text="${rolePermissionStat.index}+1 + ${(rolePermissionPage.pageNum-1)*rolePermissionPage.pageSize}"></td>
                    <td th:width="100px" th:text="*{roleName}"></td>
                    <td th:width="100px" th:text="*{permissionName}"></td>
                    <td th:width="120px" th:text="*{createPeople}"></td>
                    <td th:width="200px" th:text="*{createTime == null ? '' : #dates.format(createTime, 'yyyy-MM-dd HH:mm:ss')}"></td>
                    <td th:width="80px" th:text="*{remark}"></td>
                    <td th:width="50px">
                        <a class="btn btn-primary btn-xs btn-gradient dark"
                           th:href="@{/rolePerm/toModify(rolePermissionId=*{rolePermissionId},pclass=p_6,currentClass=c_11)}">编辑</a>
                    </td>
                </tr>
                </tbody>
            </table>
            <div th:replace="admin/fragments/page :: page(${rolePermissionPage})"></div>
        </div>
    </div>

    <aside id="sidebar_right" class="nano affix">
        <div class="sidebar-right-content nano-content">
            <form method="" id="admin-form" th:action="@{${rolePermissionPage.requestUrl}}" th:object="${rolePermissionQuery}">
                <input type="hidden" th:value="p_6" name="pclass"/>
                <input type="hidden" th:value="c_11" name="currentClass"/>
                <input type="hidden" th:field="*{pageSize}"/>
                <input type="hidden" th:field="*{pageNum}"/>
                <div class="tab-block sidebar-block br-n">
                    <div class="tab-content br-n">
                        <div id="sidebar-right-tab1" class="tab-pane active">
                            <div class="admin-form">
                                <h5 class="title-divider text-muted mb20"><span
                                        class="glyphicon glyphicon-filter">过滤条件</span></h5>

                                <div class="section mb15" style="text-align: center">
                                    <label class="field prepend-icon">
                                        <select id="type" th:field="${rolePermissionQuery.roleId}" class="form-control">
                                            <option value="" th:selected="selected">--请选择角色--</option>
                                            <option th:each="role : ${allRoles}" th:object="${role}" th:text="*{roleName}" th:value="*{roleId}"></option>
                                        </select>
                                    </label>
                                </div>

                                <div class="section mb15" style="text-align: center">
                                    <label class="field prepend-icon">
                                        <select id="type" th:field="${rolePermissionQuery.permissionId}" class="form-control">
                                            <option value="" th:selected="selected">--请选择权限--</option>
                                            <option th:each="perm : ${allPermissions}" th:object="${perm}" th:text="*{name}" th:value="*{permissionId}"></option>
                                        </select>
                                    </label>
                                </div>

                                <div class="section" style="text-align: center">
                                    <button class="btn btn-default btn-sm" type="submit">查询</button>
                                    <button class="btn btn-default btn-sm" type="button" onclick="resetInput()">清空
                                    </button>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </aside>
</div>
<script type="text/javascript" th:inline="javascript" layout:fragment="javascript">
    $.post(/*[[@{/rolePerm/getOperaStatus}]]*/ "/rolePerm/getOperaStatus", {},
            function (data) {
                if (data.code == 1) {
                    new PNotify({
                        title: '系统提示',
                        text: data.msg,
                        type: 'success',
                        delay: 1000
                    });
                } else if (data.code != 1) {
                    new PNotify({
                        title: '系统提示',
                        text: data.msg,
                        type: 'danger',
                        delay: 1000
                    });
                }
            }, "json");
    //删除
    function del() {
        var ids = [];
        $("input[name='rolePermissionBox']:checked").each(function(){
            ids.push(this.value);
        });
        if(ids.length == 0){
            new PNotify({
                title: '温馨提示',
                text: '请选择一条记录',
                type: 'warning',
                delay: 1000
            });
            return;
        }
        $.confirm({
            title: '确认',
            content: '确认删除？',
            confirm: function () {
                $.post(/*[[@{/rolePerm/remove}]]*/ "/rolePerm/remove", {
                            rolePermissionIds: ids
                        },
                        function (data) {
                            if (data.code == 1) {
                                new PNotify({
                                    title: '系统提示',
                                    text: data.msg,
                                    type: 'success',
                                    delay: 1000
                                });
                                //刷新
                                setTimeout(function () {
                                    window.location.reload();
                                }, 1000);
                            } else if (data.code != 1) {
                                new PNotify({
                                    title: '系统提示',
                                    text: data.msg,
                                    type: 'danger',
                                    delay: 1000
                                });
                            }
                        }, "json");
            },
            cancel: function () {
            }
        });
    }

    function onSuccess(th) {
        $(th).toggleClass("success");
        var id = $(th).attr("id").replace("tb_", "");
        $("#box_" + id).prop('checked', !$("#box_" + id).prop('checked'));
    }

    function check(th){
        $(th).prop('checked', !$(th).prop('checked'));
    }

    function allCheck(){
        $("input[name='rolePermissionBox']").each(function(){
            if($("#allRolePermissionBox").prop('checked')){
                $(this).parent().parent().addClass("success");
                $(this).prop('checked', true);
            }else{
                $(this).parent().parent().removeClass("success");
                $(this).prop('checked', false);
            }
        });
    }

    $(document).ready(function(){
        $("input[name='rolePermissionBox']:checked").each(function(){
            if($(this).prop('checked')){
                $(this).parent().parent().toggleClass("success");
            }
        });
    })

</script>
</body>
</html>